<!-- 收货地址列表-新增 -->
<script setup>
import { ref, reactive, nextTick } from 'vue'
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import { onShow } from '@dcloudio/uni-app'
// 数据
const data = reactive({
  showPicker: false,
  defaultValue: '',
  // defaultValue: ['河北省','唐山市','丰南区'],
})

const cityPickerConfirm = (val) => {
  console.log(val)

  formDate.area = ' '
  nextTick(() => {
    formDate.area = val.name
    uFormRef.value.validateField('formDate.area');
  })
  data.showPicker = false;
};
// 响应式表单数据  
const formDate = reactive({
  name: '',
  phone: '',
  area: '',
  address: '',
});
// 表单校验规则
const rules = {
  name: [
    {
      required: true,
      message: '请输入收货人姓名',
      trigger: ['blur', 'change'],
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入收货人手机号码',
      trigger: ['blur', 'change'],
    },
    {
      len: 11,
      message: '请输入正确的手机号码',
      trigger: ['blur', 'change'],
    }
  ],
  area: [
    {
      required: true,
      message: '请选择所在地区',
      trigger: ['change'],
    },
  ],
  address: [
    {
      required: true,
      message: '请输入详细地址',
      trigger: ['blur', 'change'],
    },
    {
      pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,50}$/,
      message: '长度需要2-50之间，不能包含特殊符号',
      trigger: ['blur', 'change'],
    }
  ],
};
// 表单引用  
const uFormRef = ref(null);
// 新增地址
function add() {
  uFormRef.value.validate(valid => {
    if (!valid) return
    // 提交
  })
}
</script>

<template>
  <view class="address-add-page">
    <!-- 表单 -->
    <view class="form-box">
      <up-form labelPosition="left" :model="formDate" :rules="rules" ref="uFormRef" labelWidth="70">
        <up-form-item label="收货人" prop="name">
          <up-input v-model="formDate.name" placeholder="请输入收货人姓名" placeholderStyle="color:#C8C9CD"
            border="surround"></up-input>
        </up-form-item>
        <up-form-item label="手机号码" prop="phone">
          <up-input v-model="formDate.phone" placeholder="请输入收货人手机号码" placeholderStyle="color:#C8C9CD"
            border="surround">
            <template #suffix>
              <text class="area-code">+86</text>
            </template>
          </up-input>
        </up-form-item>
        <up-form-item label="所在地区" prop="area" @click="data.showPicker = true">
          <up-input v-model="formDate.area" placeholder="请选择所在地区" placeholderStyle="color:#C8C9CD" border="surround"
            :disabled="true" disabledColor="#FAFAFA"></up-input>
        </up-form-item>
        <up-form-item label="详细地址" prop="address">
          <up-input v-model="formDate.address" placeholder="请输入详细地址" placeholderStyle="color:#C8C9CD"
            border="surround"></up-input>
        </up-form-item>
      </up-form>
    </view>

    <!-- 所在地区 省市区选择器 -->
    <cityPicker :visible="data.showPicker" :column="3" :default-value="data.defaultValue" :mask-close-able="false"
      @confirm="cityPickerConfirm" @cancel="data.showPicker = false" />
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content">
        <up-button text="保存" type="primary" :disabled="false" shape="circle" @click="add"></up-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.address-add-page {
  box-sizing: border-box;
  padding-bottom: 182rpx;
  min-height: 100vh;
  background-color: #F9F9F9;

  // 表单
  & .form-box {
    margin-top: 16rpx;
    padding: 0 32rpx;
    padding-bottom: 32rpx;
    background: #FFFFFF;

    &::v-deep .u-form {
      & .u-form-item__body__left__content__label {
        font-weight: 400;
        font-size: 28rpx;
        color: #929397;
      }

      & .u-input {
        background: #FAFAFA;
        border: none;
        border-radius: 8rpx !important;

        & .area-code {
          font-weight: 400;
          font-size: 24rpx;
          color: #929397;
        }
      }
    }
  }

  // 底部栏
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #E9E9EB;

    &::v-deep .content {
      box-sizing: border-box;
      padding: 12rpx 40rpx;

      & .u-button {
        height: 88rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        background: #FFA618;
        border-radius: 112rpx;
        border: none;
      }
    }
  }
}
</style>